<template>
	<view>
		<view style="height: 120rpx;">
			<image v-if="windowWidth<=768" style="width: 100%;height: 120rpx;" src="../../static/images/rectangle.png" ></image>
		</view>

		<view class="index-container">
			<view class="index-content">
				<uni-row>
					<uni-col :span="8">
						<view class="index-span">
							<text class="index-span-text" style="color: #28A3FF;">{{cggzCount}}<text style="font-size: 30rpx;">个</text></text>
							<text>常规工作</text>
						</view>

					</uni-col>
					<uni-col :span="8">
						<view  class="index-span">
							<text class="index-span-text" style="color: #E99B3E;">{{yjygCount}}<text style="font-size: 30rpx;">个</text></text>
							<text>预警预告</text>
						</view>
					</uni-col>
					<uni-col :span="8">
						<view  class="index-span">
							<text class="index-span-text" style="color: #FB140B;">{{tfsjCount}}<text style="font-size: 30rpx;">个</text></text>
							<text>突发事件</text>
						</view>
					</uni-col>
				</uni-row>
			</view>
		</view>
    <view class="index-content">
      <uni-section title="超期事项" titleFontSize="30rpx" type="line">
        <view class="charts-box">
          <qiun-data-charts
              type="ring"
              :opts="opts"
              :chartData="chartData"
          />
        </view>
      </uni-section>
    </view>
    <view class="index-content">
      <uni-section title="部门统计" titleFontSize="30rpx" type="line">
        <view class="charts-box">
          <qiun-data-charts
              type="column"
              :opts="opts1"
              :chartData="chartData1"
          />
        </view>
      </uni-section>
    </view>
    <view class="index-content">
      <uni-section title="地区反馈统计" titleFontSize="30rpx" type="line">
        <view class="charts-box">
          <qiun-data-charts
              type="bar"
              :opts="opts2"
              :chartData="chartData2"
          />
        </view>
      </uni-section>
    </view>
	</view>

</template>

<script>

	import {getSxlxCount,getSxlxCountData,getXdbmCount} from "@/api/system/xdwj";

  export default {
		name: "index",
    data() {
      return {
        fkxxList: [],
        chartData: {},
        chartData1: {},
        chartData2: {},
        cggzCount:0,
        yjygCount:0,
        tfsjCount:0,
        cggzCsCount:0,
        yjygCsCount:0,
        tfsjCsCount:0,
        cqsxData:[],
        //您可以通过修改 config-ucharts.js 文件中下标为 ['ring'] 的节点来配置全局默认参数，如都是默认参数，此处可以不传 opts 。实际应用过程中 opts 只需传入与全局默认参数中不一致的【某一个属性】即可实现同类型的图表显示不同的样式，达到页面简洁的需求。
        opts: {
          rotate: false,
          rotateLock: false,
          color: ["#1890FF","#91CB74","#FAC858","#EE6666","#73C0DE","#3CA272","#FC8452","#9A60B4","#ea7ccc"],
          padding: [5,5,5,5],
          dataLabel: true,
          enableScroll: false,
          legend: {
            show: true,
            position: "right",
            lineHeight: 25
          },
          extra: {
            ring: {
              ringWidth: 60,
              activeOpacity: 0.5,
              activeRadius: 10,
              offsetAngle: 0,
              labelWidth: 15,
              border: false,
              borderWidth: 3,
              borderColor: "#FFFFFF"
            }
          },

        },
		windowWidth:0,
        opts1: {
          color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4", "#ea7ccc"],
          padding: [15, 15, 0, 5],
          enableScroll: false,
          legend: {},
          xAxis: {
            disableGrid: true
          },
          yAxis: {
            data: [
              {
                min: 0
              }
            ]
          },
          extra: {
            column: {
              type: "group",
              width: 30,
              activeBgColor: "#000000",
              activeBgOpacity: 0.08
            }
          },
        },
        opts2: {
          color: ["#1890FF","#91CB74","#FAC858","#EE6666","#73C0DE","#3CA272","#FC8452","#9A60B4","#ea7ccc"],
          padding: [15,30,0,5],
          enableScroll: false,
          legend: {},
          xAxis: {
            boundaryGap: "justify",
            disableGrid: false,
            min: 0,
            axisLine: false,
            max: 70
          },
          yAxis: {},
          extra: {
            bar: {
              type: "stack",
              width: 30,
              meterBorde: 1,
              meterFillColor: "#FFFFFF",
              activeBgColor: "#000000",
              activeBgOpacity: 0.08,
              categoryGap: 2
            }
          }
        }
      };
    },
    onShow() {
      this.getSxlxCount();
      this.getSxlxCountCs();
      this.getServerData();
      this.getServerData1();
      this.getServerData2();
      // this.getSxlxCountCsData();
//进入页面不触发获取数据  改变的时候触发
				const windowResizeCallback = (res) => {
				this.windowWidth=res.size.windowWidth
				  // console.log('变化后的窗口高度=' + res.size.windowHeight)
				}
				uni.onWindowResize(windowResizeCallback)
    },
	onLoad() {
	uni.getSystemInfo().then(res=>{

				const windowWidth1 = res[1].windowWidth; // 窗口宽度
				console.log(res)
				// const windowHeight = res.windowHeight; // 窗口高度
				this.windowWidth = windowWidth1
				// console.log(this.windowWidth)

	})
	},
    onReady() {

    },
    methods: {
      getServerData() {
        getSxlxCountData({isCq:'1'}).then(res1=>{
          let res = {
            series: [
              {
                // data: [{"name":"常规工作","value":this.cggzCsCount},{"name":"预警预告","value":this.yjygCsCount},{"name":"突发事件","value":this.tfsjCsCount}]
                data: res1.data,
              }
            ]
          };
          this.chartData = JSON.parse(JSON.stringify(res));
        })
      },
      getServerData1() {
        //模拟从服务器获取数据时的延时
          //模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
        getXdbmCount().then(res1=>{
          let counts = res1.data.map(m=>m.count);
          let deptNames = res1.data.map(m => m.deptName);
          let res = {
            categories: deptNames,
            series: [
              {
                name: "下达数量",
                data: counts
              }
            ]
          };
          this.chartData1 = JSON.parse(JSON.stringify(res));
        })
      },
      getServerData2() {
        //模拟从服务器获取数据时的延时
        setTimeout(() => {
          //模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
          let res = {
            categories: ["长春市","吉林市","四平市","辽源市","通化市","白山市","松原市","白城市","延边市","长白山","梅河口"],
            series: [
              {
                name: "反馈数量",
                data: [35,36,31,33,13,34,11,12,13,14,15]
              },
            ]
          };
          this.chartData2 = JSON.parse(JSON.stringify(res));
        }, 500);
      },
      getSxlxCount(){
        getSxlxCount().then(res => {
          if (res.data){
            let data = res.data;
            for (let i = 0; i < data.length; i++) {
              if (data[i].sxlx == 1) {
                this.cggzCount = data[i].count;
              }
              if (data[i].sxlx == 2) {
                this.yjygCount = data[i].count;
              }
              if (data[i].sxlx == 3) {
                this.tfsjCount = data[i].count;
              }
            }
          }
        })
      },
      getSxlxCountCs(){
        getSxlxCount({isCq:'1'}).then(res => {
          if (res.data){
            let data = res.data;
            for (let i = 0; i < data.length; i++) {
              if (data[i].sxlx == 1) {
                this.cggzCsCount = data[i].count;
              }
              if (data[i].sxlx == 2) {
                this.yjygCsCount = data[i].count;
              }
              if (data[i].sxlx == 3) {
                this.tfsjCsCount = data[i].count;
              }
            }
          }
        })
      },
    }
	}
</script>

<style>
	page {
		background-color: #F6F6F6;
	}
  .charts-box {
    width: 100%;
    height: 300px;
  }
	.index-container {
		margin: 30rpx;
		z-index: 9;
		margin-top: -100rpx;
		position: sticky;
	}

	.index-content {
		background-color: white;
		padding: 20rpx;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		margin-bottom: 30rpx;
	}
	.index-span {
		text-align: center;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.index-span-text {
		font-size: 55rpx;
		margin-bottom: 10rpx;
	}

	.index-span-text-mid {
		font-size: 50rpx;
		margin-top: 10rpx;
	}
</style>
